<template>
 <!-- 底部组件 -->
 <footer class="app-footer">
  <!-- 联系我们部分 -->
  <div class="contact">
   <div class="container">
    <dl>
      <dt>客户服务</dt>
      <dd> <i class="iconfont icon-kefu"></i>在线客服</dd>
      <dd> <i class="iconfont icon-question"></i>问题反馈</dd>
    </dl>
    <dl>
      <dt>关注我们</dt>
      <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
      <dd><i class="iconfont icon-weibo"></i>微博</dd>
    </dl>
    <dl>
      <dt>下载App</dt>
      <dd class="qrcode"><img src="@/assets/images/qrcode.jpg"></dd>
      <dd class="download">
        <span>扫描二维码</span>
        <span>立马下载APP</span>
        <a href="javascript;">
          下载页面
        </a>
      </dd>
    </dl>
    <dl>
      <dt>服务热线</dt>
      <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00 </small> </dd>
    </dl>
   </div>
  </div>

  <!-- 其他 -->
  <div class="extra">
    <div class="container">
      <div class="slogan">
        <ul>
          <li><a href="javascript;"><i class="iconfont icon-footer01"></i>价格亲民</a></li>
          <li><a href="javascript;"><i class="iconfont icon-footer02"></i>物流快捷</a></li>
          <li><a href="javascript;"><i class="iconfont icon-footer03"></i>品质新鲜</a></li>
        </ul>
      </div>

      <!-- 版权信息 -->
      <div class="copyright">
        <p>
          <a href="javascript;">关于我们</a>
          <a href="javascript;">帮助中心</a>
          <a href="javascript;">售后服务</a>
          <a href="javascript;">配送与验收</a>
          <a href="javascript;">商务合作</a>
          <a href="javascript;">搜索推荐</a>
          <a href="javascript;">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜儿</p>
      </div>
    </div>
  </div>
 </footer>
</template>

<script>
export default {
  name: 'AppFooter'
}
</script>

<style lang="less" scoped>
  .app-footer {
    background-color: #f5f5f5;
    .contact {
      background: #fff;
    padding: 50px 0;
      .container {
        display: flex;
        justify-content: space-between;
        dl {
          text-align: center;
          color: #666;
          dt {
            font-size: 20px;
            color: #999;
            margin-bottom: 25px;
          }
          dd {
            display: inline-block;
            width: 90px;
            height: 90px;
            line-height: 1;
            font-size: 18px;
            margin: 0 10px;
            border: 2px solid #f5f5f5;
            i {
              display: block;
              font-size: 32px;
              margin: 10px 0;
              &:hover {
                color: @xtxColor;
              }
            }
          }
          .qrcode{
            vertical-align:bottom; // !
          }
          .download {
            border: 0;
            width: 100px;
            text-align: center;
           span {
            display: block;
            font-size: 15px;
            color: #999;
            margin: 10px 0;

           }
           >a {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            font-size: 15px;
            background-color: @xtxColor;
           }
          }
          .hotline {
            width: 100%;
            display: flex;
            flex-flow: column;
            justify-content: center;
            font-size: 22px;
            color: #666;
            border: 0;
            small {
              margin-top: 10px;
              font-size: 16px;
              color: #999;
            }
          }
        }
      }
    }
  }
  .extra {
    background: #333;
    .container {
      .slogan {
        height: 178px;
        line-height: 178px;
        padding: 0 60px;
        ul {
          display: flex;
          justify-content: space-between;
          li {
            a {
              color: #fff;
              font-size: 30px;
              i {
                font-size: 50px;
                vertical-align: middle;
                margin-right: 10px;
              }
            }
          }
        }
      }
      .copyright {
        height: 170px;
        color: #999;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #444;
        a {
          color: #999;
          padding: 0 8px;
          ~ a {
            border-left: 2px solid #666;
          }
        }
       p {
        &:nth-of-type(2) {
          margin-top: 10px ;
        }
       }
      }
    }
  }
</style>
